<script setup>
import {ref, watchEffect} from "vue";

const props = defineProps({
  disabled:{
    type:Boolean,
    default:false
  },
  modelValue:{
    type:Boolean,
    default:false
  },
  activeValue:{
    type:[String,Number,Boolean],
    default:true
  },
  inActiveValue:{
    type:[String,Number,Boolean],
    default:false
  }
})

const emits = defineEmits(['update:modelValue'])

const boValue = ref(false)

watchEffect(()=>{
  let valueMap = {
    [props.inActiveValue] : false,
    [props.activeValue] : true
  }
  boValue.value = valueMap[props.modelValue];
})

const onSwitchChange = function ({detail}) {
  let {value} = detail;
  emits('update:modelValue',value ? props.activeValue : props.inActiveValue);
}

</script>

<template>
  <switch class="uni-switch"
          :checked="boValue"
          @change="onSwitchChange($event)"
          :disabled="disabled"
  ></switch>
</template>

<style scoped lang="scss">

</style>
